{layout name="layout1" /}
<style>
    .layui-table-cell {
        height: 60px;
        max-width: 100%;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-collapse like-layui-collapse" lay-accordion="" style="border:1px dashed #c4c4c4">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title like-layui-colla-title" style="background-color: #fff"></h2>
                    <div class="layui-colla-content layui-show">
                        <p>*主播管理。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab layui-tab-card" lay-filter="tab-all">
            <ul class="layui-tab-title">
                <li data-type=1 class="layui-this">全部主播</li>
                <li data-type=2>待审核</li>
                <li data-type=3>正常</li>
                <li data-type=4>拒绝</li>
            </ul>
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="white-space: nowrap;">主播名：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="keyword" id="keyword" placeholder="" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-sm layuiadmin-btn-unit {$view_theme_color}" lay-submit
                                lay-filter="TheHost-search">查询
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-primary layuiadmin-btn-unit }" lay-submit
                                lay-filter="TheHost-clear-search">清空查询
                        </button>
                    </div>

                </div>
            </div>

            <div class="layui-card-body">
                <div style="padding-bottom: 10px;">
                    <button class="layui-btn layui-btn-sm layuiadmin-btn-unit {$view_theme_color}" data-type="add">新增主播
                    </button>
                    <!--                <button class="layui-btn layui-btn-sm layuiadmin-btn-unit layui-btn-danger" data-type="batchdel">删除所选</button>-->
                </div>

                <table id="theHost" lay-filter="theHost"></table>

                <script type="text/html" id="TheHost-operation">
                    <a class="layui-btn layui-btn layui-btn-warm layui-btn-sm" lay-event="audit">审查</a>
                    <a class="layui-btn layui-btn layui-btn-sm" lay-event="schedule">档期</a>
                    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">修改</a>
                    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
                </script>
            </div>
        </div>
    </div>
</div>


<script>
    layui.config({
        version: "{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'like', 'table', 'form'], function () {
            var $ = layui.$
                , form = layui.form
                , table = layui.table
                , like = layui.like
                , element = layui.element;


            getList(1);
            //切换列表
            element.on('tab(tab-all)', function (data) {
                var type = $(this).attr('data-type');
                getList(type);
            });

            //图片放大
            $(document).on('click', '.image-show', function () {
                var src = $(this).attr('src');
                like.showImg(src, 600);
            });

            function getList(type) {
                table.render({
                    id: 'theHost',
                    elem: '#theHost'
                    , url: '{:url("theHost/lists")}?type=' + type
                    , cols: [[
                        {field: 'id', width: 80, fixed: "left", title: '序号'}
                        , {field: 'true_name', width: 150, fixed: "left", title: '真实名称'}
                        , {field: 'wx_code', width: 150, title: '微信号'}
                        , {field: 'tel_number', width: 150, title: '电话号'}
                        , {
                            field: 'status', width: 125, title: '状态', templet: function (value, row, index) {
                                var i = "";
                                if (value.status == "0") {
                                    i = "<span class=\"layui-badge layui-bg-gray\">待审核</span>"
                                } else if (value.status == "1") {
                                    i = "<span class=\"layui-badge layui-bg-green\">正常</span>"
                                } else if (value.status == "2") {
                                    i = "<span class=\"layui-badge layui-bg-red\">禁用</span>"
                                } else if (value.status == "3") {
                                    i = "<span class=\"layui-badge layui-bg-orange\">拒绝</span>"
                                }
                                return i
                            }
                        }
                        , {field: 'nick_name', width: 150, title: '昵称'}
                        , {field: 'fans_num', width: 150, title: '粉丝数量'}
                        , {
                            field: 'figure_image', width: 150, title: '形象图', templet: function (value, row, index) {
                                var i = "";
                                if (value.figure_image) {
                                    i = "<img class='image-show' src='" + value.figure_image + "'>"
                                }
                                return i
                            }
                        }
                        , {field: 'douyin_code', width: 250, title: '抖音号'}
                        , {field: 'kuaishou_code', width: 250, title: '快手号'}
                        , {field: 'tianmao_code', width: 250, title: '天猫号'}
                        , {fixed: 'right', title: '操作', width: 300, align: 'center', toolbar: '#TheHost-operation'}
                    ]]
                    , page: true
                    , text: {none: '暂无数据！'}
                    , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                        return {
                            "code": res.code,
                            "msg": res.msg,
                            "count": res.data.count, //解析数据长度
                            "data": res.data.lists, //解析数据列表
                        };
                    }
                    , done: function fix() {
                        // 该方法用于解决,使用fixed固定列后,行高和其他列不一致的问题
                        $(".layui-table-main tr").each(function (index, val) {
                            $(".layui-table-fixed").each(function () {
                                $($(this).find(".layui-table-body tbody tr")[index]).height($(val).height());
                            });
                        });

                        $(".layui-table-header tr").each(function (index, val) {
                            $(".layui-table-fixed").each(function () {
                                $($(this).find(".layui-table-header thead tr")[index]).height($(val).height());
                            });
                        });

                        window.onresize = function () {
                            fix()
                        }

                    }
                });
            }


            //监听搜索
            form.on('submit(TheHost-search)', function (data) {
                var field = data.field;
                //执行重载
                table.reload('theHost', {
                    where: field,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                });
            });
            //清空查询
            form.on('submit(TheHost-clear-search)', function () {
                $('#keyword').val('');//清空输入框
                //刷新列表
                table.reload('theHost', {
                    where: []
                });
            });

            //事件
            var active = {
                add: function () {
                    {
                        layer.open({
                            type: 2
                            , title: '新增主播'
                            , content: '{:url("TheHost/add")}'
                            , area: ['60%', '95%']
                            , btn: ['确定', '取消']
                            , yes: function (index, layero) {

                                var iframeWindow = window['layui-layer-iframe' + index]
                                    , submitID = 'TheHost-submit'
                                    , submit = layero.find('iframe').contents().find("#TheHost-submit");
                                //监听提交

                                iframeWindow.layui.form.on('submit(TheHost-submit)', function (data) {
                                    var field = data.field;
                                    {
                                        like.ajax({
                                            url: '{:url("TheHost/add")}',
                                            data: field,
                                            type: "post",
                                            success: function (res) {
                                                if (res.code == 1) {
                                                    layui.layer.msg(res.msg, {
                                                        offset: '15px'
                                                        , icon: 1
                                                        , time: 1000
                                                    });
                                                    layer.close(index); //关闭弹层
                                                    table.reload('theHost'); //数据刷新
                                                } else {
                                                    layer.msg(res.msg, {
                                                        offset: '15px'
                                                        , icon: 2
                                                        , time: 1000
                                                    });
                                                }

                                            }
                                        });
                                    }
                                });
                                submit.trigger('click');
                            },

                        })
                    }
                }

                , batchdel: function () {
                    //删除所选
                    var checkStatus = table.checkStatus('theHost'), checkData = checkStatus.data; //得到选中的数据
                    //是否已选数据
                    if (checkData.length === 0) {
                        return layer.msg('请选择数据');
                    } else {
                        //获取所选id
                        ids = [];
                        for (var i in checkData) {
                            ids.push(checkData[i]['id']);
                        }

                        layer.confirm('确定删除所选主播？', function (index) {
                            like.ajax({
                                url: '{:url("TheHost/del")}',
                                data: {id: ids},
                                type: "post",
                                success: function (res) {
                                    if (res.code == 1) {
                                        layui.layer.msg(res.msg, {
                                            offset: '15px'
                                            , icon: 1
                                            , time: 1000
                                        });
                                        layer.close(index); //关闭弹层
                                        table.reload('theHost'); //数据刷新
                                    } else {
                                        layer.msg(res.msg, {
                                            offset: '15px'
                                            , icon: 2
                                            , time: 1000
                                        });
                                    }
                                }
                            });
                            layer.close(index);
                        });
                    }
                }
            };
            $('.layui-btn.layuiadmin-btn-unit').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });


            table.on('tool(theHost)', function (obj) {
                if (obj.event === 'del') {
                    var id = obj.data.id;
                    var name = obj.data.true_name;

                    layer.confirm('确定删除主播:<span style="color: cornflowerblue">' + name + "</span>", function (index) {
                        like.ajax({
                            url: '{:url("TheHost/del")}',
                            data: {id: id},
                            type: "post",
                            success: function (res) {
                                if (res.code == 1) {
                                    layui.layer.msg(res.msg, {
                                        offset: '15px'
                                        , icon: 1
                                        , time: 1000
                                    });
                                    layer.close(index); //关闭弹层
                                    table.reload('theHost'); //数据刷新
                                    obj.del();
                                } else {
                                    layer.msg(res.msg, {
                                        offset: '15px'
                                        , icon: 2
                                        , time: 1000
                                    });
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    var id = obj.data.id;
                    layer.open({
                        type: 2
                        , title: '修改主播信息'
                        , content: '{:url("TheHost/edit")}?id=' + id
                        , area: ['60%', '90%']
                        , btn: ['确定', '取消']
                        , yes: function (index, layero) {
                            var iframeWindow = window['layui-layer-iframe' + index]
                                , submit = layero.find('iframe').contents().find('#theHost-submit-edit');
                            //监听提交
                            iframeWindow.layui.form.on('submit(theHost-submit-edit)', function (data) {
                                var field = data.field;
                                if(field.sort > 99){
                                    layer.msg("排序值过大", {
                                        offset: '15px'
                                        , icon: 2
                                        , time: 1000
                                    });
                                    return false;
                                }
                                like.ajax({
                                    url: '{:url("TheHost/edit")}',
                                    data: field,
                                    type: "post",
                                    success: function (res) {
                                        if (res.code == 1) {
                                            layui.layer.msg(res.msg, {
                                                offset: '15px'
                                                , icon: 1
                                                , time: 1000
                                            });
                                            layer.close(index); //关闭弹层
                                            table.reload('theHost'); //数据刷新
                                        }
                                        else {
                                            console.log(2);
                                            layer.msg(res.msg, {
                                                offset: '15px'
                                                , icon: 2
                                                , time: 1000
                                            });
                                        }
                                    }

                                });
                            });
                            submit.trigger('click');
                        }
                    })
                } else if (obj.event === 'audit') {
                    var id = obj.data.id;
                    layer.open({
                        type: 2
                        , title: '主播档期'
                        , content: '{:url("TheHost/audit")}?id=' + id
                        , area: ['60%', '95%']
                        , end: function () {
                            table.reload('theHost'); //数据刷新
                        }
                    })
                } else if (obj.event === 'schedule') {
                    var id = obj.data.id;
                    layer.open({
                        type: 2
                        , title: '主播审核'
                        , content: '{:url("TheHost/scheduleList")}?id=' + id
                        , area: ['95%', '95%']
                        , end: function () {
                            table.reload('theHost'); //数据刷新
                        }
                    })
                }
            });
        }
    );
</script>